<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建活动 - 校园活动报名平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/custom-icons.css" rel="stylesheet">
    <style>
        .container {
            max-width: 960px;
        }
        .header {
            padding: 2rem 0;
            text-align: center;
        }
        .card {
            margin-bottom: 1.5rem;
        }
        .footer {
            margin-top: 3rem;
            padding: 1.5rem 0;
            color: #777;
            border-top: 1px solid #e5e5e5;
            text-align: center;
        }
        .nav-item {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>校园活动报名平台</h1>
            <p class="lead">创建新的校园活动</p>
        </div>

        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">活动平台</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="activities.html">活动列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="create-activity.html">创建活动</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="my-activities.html">我的活动</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="profile.html">个人信息</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#" id="logoutBtn">退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">创建活动</h5>
                        <form id="createActivityForm">
                            <div class="mb-3">
                                <label for="activityTitle" class="form-label">活动标题</label>
                                <input type="text" class="form-control" id="activityTitle" required>
                            </div>
                            <div class="mb-3">
                                <label for="activityDescription" class="form-label">活动描述</label>
                                <textarea class="form-control" id="activityDescription" rows="5" required></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="activityLocation" class="form-label">活动地点</label>
                                <input type="text" class="form-control" id="activityLocation" required>
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="activityStartTime" class="form-label">开始时间</label>
                                    <input type="datetime-local" class="form-control" id="activityStartTime" required>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="activityEndTime" class="form-label">结束时间</label>
                                    <input type="datetime-local" class="form-control" id="activityEndTime" required>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="activityDeadline" class="form-label">报名截止时间</label>
                                    <input type="datetime-local" class="form-control" id="activityDeadline" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="activityMaxParticipants" class="form-label">最大参与人数</label>
                                <input type="number" class="form-control" id="activityMaxParticipants" min="1" required>
                            </div>
                            <button type="submit" class="btn btn-primary">创建活动</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>© 2025 校园活动报名平台</p>
        </footer>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let currentUser = null;
        const API_BASE_URL = '/api';

        // 页面加载完成后执行
        $(document).ready(function() {
            // 检查登录状态
            checkLoginStatus();

            // 退出登录按钮点击事件
            $('#logoutBtn').on('click', function() {
                logout();
            });

            // 创建活动表单提交事件
            $('#createActivityForm').on('submit', function(e) {
                e.preventDefault();
                createActivity();
            });
        });

        // 检查登录状态
        function checkLoginStatus() {
            const user = localStorage.getItem('currentUser');
            if (user) {
                currentUser = JSON.parse(user);
            } else {
                // 未登录，跳转到登录页面
                window.location.href = 'login.html';
            }
        }

        // 退出登录
        function logout() {
            localStorage.removeItem('currentUser');
            window.location.href = 'login.html';
        }

        // 创建活动
        function createActivity() {
            if (!currentUser || !currentUser.id) {
                alert('请先登录');
                window.location.href = 'login.html';
                return;
            }

            const activityRequest = {
                title: $('#activityTitle').val(),
                description: $('#activityDescription').val(),
                location: $('#activityLocation').val(),
                startTime: $('#activityStartTime').val(),
                endTime: $('#activityEndTime').val(),
                registrationDeadline: $('#activityDeadline').val(),
                maxParticipants: $('#activityMaxParticipants').val()
            };

            $.ajax({
                url: API_BASE_URL + '/activities?creatorId=' + currentUser.id,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(activityRequest),
                success: function(response) {
                    if (response.code === 200) {
                        alert('活动创建成功');
                        // 跳转到我的活动页面
                        window.location.href = 'my-activities.html';
                    } else {
                        alert('活动创建失败：' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('活动创建失败：' + (xhr.responseJSON?.message || '服务器错误'));
                }
            });
        }
    </script>
</body>
</html> 